<template>
  <div id="app">
    <div class="header">
      <select v-model="city">
        <option v-for="c in cities" :value="c">{{ c }}</option>
      </select>
      <input type="text" v-model="search" placeholder="请输入地址" />
    </div>
    <div class="location">
      <p>当前定位：{{ location }}</p>
      <button @click="relocate">重新定位</button>
    </div>
    <hr />
    <div class="list">
      <h2>收货地址</h2>
      <ul>
        <li
          v-for="(item, index) in addresses"
          :key="index"
          @click="selectAddress(item)"
        >
          <p>
            <span>{{ item.clvss }}</span
            ><span>常用</span> {{ item.address }}<br />{{ item.name }},{{
              item.gender
            }},{{ item.phone }}
          </p>
          <button @click="deleteAddress(index)">删除</button>
        </li>
      </ul>
    </div>
    <div class="footer">
      <button @click="showForm">+添加地址</button>
    </div>

    <transition name="fade">
      <div class="modal" v-if="formVisible">
        <form @submit.prevent="submitForm">
          <label for="address">地址</label>
          <input type="text" id="address" v-model="form.address" required />
          <label for="name">姓名</label>
          <input type="text" id="name" v-model="form.name" required />
          <label for="gender">性别</label>
          <select id="gender" v-model="form.gender" required>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <label for="gender">地址类型</label>
          <select id="clvss" v-model="form.clvss" required>
            <option value="家">家</option>
            <option value="学校">学校</option>
            <option value="公司">公司</option>
            <option value="其他">其他</option>
          </select>
          <label for="phone">电话号码</label>
          <input type="tel" id="phone" v-model="form.phone" required />

          <button type="submit">确定</button>

          <button type="button" @click="hideForm">取消</button>
        </form>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: ["柳州市", "南宁市", "玉林市"],
      city: "柳州市",
      search: "",
      location: "柳州市市中心",
      addresses: [
        {
          address: "柳州市柳北区某某街道",
          name: "张三",
          gender: "男",
          phone: "13888888888",
          clvss: "家",
        },
        {
          address: "柳州市城中区某某路",
          name: "李四",
          gender: "女",
          phone: "13999999999",
          clvss: "学校",
        },
      ],
      formVisible: false,
      form: {
        address: "",
        name: "",
        gender: "",
        phone: "",
        clvss: "",
      },
    };
  },
  methods: {
    relocate() {
      this.location = this.city + Math.random().toString(36).slice(2, 6);
    },

    deleteAddress(index) {
      this.addresses.splice(index, 1);
    },

    selectAddress(item) {
      // this.$router.go(-1);
      this.$router.push({ path: "/index", query: { address: item.address } });
    },

    showForm() {
      this.formVisible = true;
    },

    hideForm() {
      this.formVisible = false;
    },

    submitForm() {
      this.addresses.push({
        address: this.form.address,
        name: this.form.name,
        gender: this.form.gender,
        phone: this.form.phone,
        clvss: this.form.clvss,
      });

      this.form = {
        address: "",
        name: "",
        gender: "",
        phone: "",
        clvss: "",
      };

      this.hideForm();
    },
  },
};
</script>

<style>
/* 设置样式 */
body {
  font-family: "宋体";
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 10vw;
  margin: 0 auto;
  padding: 5vw 3vw 3vw 2vw;
  height: 5vw;
}

.header select {
  margin-left: 3vw;
  width: 40%;
  width: 25vw;
  border: none;
  font-size: 5vw;
  font-weight: bold;
}

.header select option {
  font-size: 3vw;
}

.header input {
  width: 60%;
  height: 8vw;
  margin-left: 5vw;
  padding-left: 3vw;
  font-size: 3vw;
  background-color: #eee;
}

.location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  font-size: 4vw;
}

.location p {
  width: 50%;
}

.location button {
  width: 50%;
  width: 20vw;
  border: none;
  font-size: 4vw;
  background: none;
  color: blue;
}

hr {
  background-color: black;
  size: 1px;
}

.list {
  margin: 10px;
}

.list ul {
  list-style: none;
  padding: 0;
}

.list li {
  position: relative;
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 5vw 0 5vw 0;
  padding-bottom: 2vw;
}

.list li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: silver; 
}

.list li p span {
  padding: 0.5vw 0.5vw 0.5vw 0.5vw;
  margin-left: 1vw;
  border: solid;
  border-radius: 20%;
  font-size: 3vw;
}

.list li p {
  width: 70%;
  font-size: 4vw;
  font-weight: bold;
}

.list li button {
  position: absolute;
  left: 90%;
  width: 30%;
  width: 10vw;
  font-size: 4vw;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.footer button {
  border: none;
  width: 50vw;
  font-size: 5vw;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72vw;
  height: 90vw;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  z-index: 999;
}

.modal form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.modal form label {
  display: block;
  margin: 2vw 0;
  font-size: 3vw;
}

.modal form input,
.modal form select {
  width: 100%;
  height: 5vw;
  border-width: 2px;
}

.modal form button {
  position: relative;
  left: 38%;
  width: 20vw;
  font-size: 4vw;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
